<template>
	<view class="showping-car" @click.stop="toShow">
		<view class="showping-car-left">
			选中了{{selSum}}件商品 | {{priceSum}}
		</view>
		<view class="showping-car-right">
			<a @click.stop="toPay">去结算</a>
		</view>
		<view class="showping-car-list" v-show="isShow">
			<view class="car-list-top"><p @click.stop="clearCarList">清空购物车</p></view>
			<view class="class-content-item" v-for="x in goodsList" v-show="x.isDelShow">
				<view class="content-item-img">
					<image :src="getImg(x.imgUrl)" mode="widthFix"></image>
				</view>
				<view class="content-item-text">
					<h3>{{x.name}}</h3>
					<h4>￥{{x.price}}</h4>
					<view class="text-btn-list-btns">
						<button v-show="x.isDelShow" @click.stop="delDish(x)">-</button>
						<p v-if="x.isDelShow">{{x.num}}</p>
						<button @click.stop="addDish(x)">+</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getImg
	} from "../../utils/request.js"
	export default {
		name: "showpingCar",
		props: {
			"name":String,
			"sellerId" : String,
			"goodsList": Object,
			"isShow": Boolean
		},
		data() {
			return {
				priceSum: 0,
				selSum: 0,
				getImg: getImg,
			};
		},
		created() {

		},
		watch: {
			// 监听接收的购物车内容状态 当出现增删时修改总价
			goodsList: {
				deep: true,
				handler: function() {
					this.priceSum = 0
					this.selSum = 0
					for (let x in this.goodsList) {
						this.priceSum += this.goodsList[x].num * this.goodsList[x].price
						this.selSum += this.goodsList[x].num
					}
					this.priceSum = this.priceSum.toFixed(2)
				}
			}
		},
		methods: {
			toPay() {
				uni.navigateTo({
					url: "/pages/takeout/takeOutOrderCheckPay?name=" + this.name +"&sellerId=" + this.sellerId
				})
			},
			// 添加进购物车内容
			addDish(item) {
				if (this.goodsList[item.name]) {
					this.$set(this.goodsList[item.name], "num", this.goodsList[item.name].num + 1)
				} else {
					// 貌似引用了原对象 当更改购物车数量时 原有的对象也会有一个num数量
					this.$set(this.goodsList[item.name], "num", 1)
					// 原对象是一个二维数组 所以需要两个索引
					this.$set(this.goodsList[item.name], "isDelShow", true)
				}
				// 写入缓存
				let goodsList = uni.getStorageSync("goodsList")
				goodsList[this.name] = this.goodsList
				uni.setStorageSync("goodsList",goodsList)
			},
			// 减少数量
			delDish(item) {
				if (this.goodsList[item.name].num === 1) {
					this.$set(this.goodsList[item.name], "num", 0)
					this.$set(this.goodsList[item.name], "isDelShow", false)
					// 判断所有商品数量是否为0
					let n = 0
					for (let x in this.goodsList) {
						if (x.num === 0) {
							n += 1
						}
					}
					if (n === 0) {
						this.toShow()
					}
				} else {
					this.$set(this.goodsList[item.name], "num", this.goodsList[item.name].num - 1)
				}
				// 写入缓存
				let goodsList = uni.getStorageSync("goodsList")
				goodsList[this.name] = this.goodsList
				uni.setStorageSync("goodsList",goodsList)
			},
			toShow() {
				this.$emit("emits")
			},
			clearCarList() {
				this.$emit("clear")
			}
		}
	}
</script>

<style scoped>
	.showping-car {
		display: flex;
		position: fixed;
		bottom: .5rem;
		left: 1rem;
		right: 1rem;
		height: 50px;
		padding: 0 0 0 1rem;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		background-color: burlywood;
		/* overflow: hidden; */
	}

	.showping-car-right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 100%;
		color: #2c3e50;
		border-radius: 0 10px 10px 0;
		background-color: #f1c40f;
	}

	/* 弹出被选中的商品列表 */
	.showping-car-list {
		position: absolute;
		bottom: 50px;
		left: 0;
		right: 0;
		max-height: 200px;
		overflow-y: auto;
		background-color: white;
	}

	.car-list-top {
		width: 90%;
		margin: 0 auto;
		color: darkgray;
		text-align: right;
	}

	.class-content-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .5rem;
		height: 50px;
		width: 100%;
	}

	.class-content-item>.content-item-img {
		width: 50px;
		height: 50px;
	}

	.class-content-item>.content-item-img>image {
		width: 100%;
	}

	.class-content-item>.content-item-text {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 1rem;
		color: #ff7f50;
	}

	.class-content-item>.content-item-text>* {
		line-height: 50px;
	}

	.text-btn-list-btns {
		display: flex;
		width: 100px;
		justify-content: space-between;
		align-items: center;
	}

	.text-btn-list-btns>button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		border-radius: 30px;
		background-color: #ff4d4d;
		color: white;
	}
</style>
